<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" content="学生危机管理"></el-page-header>
    </div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">学生危机信息</div></el-col>
        <el-col :span="3" :offset="14" :xl="{span: 2, offset: 20}">
          <el-button v-if="this.menuList.includes('dailyReport')" type="primary" size="medium" @click="dailyReport()">日常上报</el-button>
        </el-col>
        <el-col :span="3" :xl="{span: 2}">
          <el-button v-if="this.menuList.includes('stateManagement')" type="primary" size="medium" @click="stateManagement()">状态管理</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20" class="platformTable">
        <simple-table :tableConfig="tableConfig" :tableData="tableData"></simple-table>
      </el-row>
      <br>
      <el-tabs v-model="activeName">
        <el-tab-pane v-if="this.menuList.includes('trackRecord')" label="跟踪记录" name="record">
          <record :id="this.id"></record>
        </el-tab-pane>
        <el-tab-pane v-if="this.menuList.includes('treatmentPlan')" label="解决方案" name="solution">
          <solution></solution>
        </el-tab-pane>
      </el-tabs>
    </div>
    <state-management v-if="this.isStateManagement" :isStateManagement="this.isStateManagement" :row="this.row" @noStateManagement="noStateManagement"></state-management>
  </div>
</template>
<script>
import simpleTable from '@/components/simpleTable.vue'
import record from './record.vue'
import solution from './solution.vue'
import stateManagement from './stateManagement.vue'
import {APICRISISGETINFO} from '@/common/api.js'
export default {
  components: {
    simpleTable,
    record,
    solution,
    stateManagement
  },
  data () {
    return {
      menuList: [],
      activeName: 'record',
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {id: 'real_name', name: '姓名'},
          {id: 'sex', name: '性别'},
          {id: 'section_title', name: '学段'},
          {id: 'grade_title', name: '年级'},
          {id: 'class_title', name: '班级'},
          {id: 'type_title', name: '危机类型'},
          {id: 'warning_level', name: '预警等级'},
          {id: 'influence_range_title', name: '影响范围'},
          {id: 'mode', name: '预警方式'},
          {id: 'status_title', name: '状态'}
        ]
      },
      tableData: [],
      id: '',
      isStateManagement: false,
      row: {}
    }
  },
  created () {
    this.id = this.$route.query.id
    this.tableList()
    this.menuList = sessionStorage.getItem('list')
  },
  methods: {
    goBack () {
      this.$router.push({path: '/crisis'})
    },
    tableList () {
      APICRISISGETINFO({
        crisis_id: this.$route.query.id
      }).then((res) => {
        if (res.status === 1) {
          this.tableData.push(res.data)
        } else {
          this.$message.error(res.msg)
          this.tableData = []
          this.tableData.push(this.seacherTab)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    stateManagement () { // 状态管理
      this.isStateManagement = true
      this.row = this.tableData[0]
    },
    noStateManagement (type) {
      this.isStateManagement = false
      if (type === 1) {
        this.tableData = []
        this.tableList()
      }
    },
    dailyReport () { // 日常上报
      this.$router.push({path: '/dailyReport', query: {id: this.$route.query.id, real_name: this.tableData[0].real_name, type: this.tableData[0].type}})
    }
  }
}
</script>
